1611513 ランダム
 ホーム | 日記 | プロフィール 【フォローする】 【ログイン】

キュートチョイス

キュートチョイス

テーブルスタイル

テーブルスタイル

テーブルとは何?という方は
基本のテーブルを先にご覧下さいね。

borderTABLE枠関連のプロパティで、

border-color 枠線の色
border-style 枠線のデザイン
border-width 枠線の幅

以上の3つをまとめて表示することが可能です。

例えば
<TABLE style="border-color:#ffccff;border-style:dashed;border-width:3px">
を下のように書き換えることができます。
<TABLE style="border:#ffccff dashed 3px">
字数制限のある楽天広場では知っておくと便利だと思います。
各プロパティは半角ずつあけてくださいね。

サンプル
枠内背景色
TDタグ内に埋め込んでください
bgcolor="#ccff99"
内枠の色
TDタグ内に埋め込んでください。
style="border:solid #cc99ff 2px"
外枠の色
TABLEタグ内に埋め込んでください。
style="border:dashed #6699ff 5px"
線の種類が変えられます。
solid
 実線 、 dotted 点線
dashed 破線 、 double 二重線
この内枠は
<TD style="border:dotted #cc9900 3px">
と書くことでドット枠として表示されます。



便箋調にする
便箋調のスタイル
<TD style="border-bottom:#cc9900 dashed 1px">
テーブルを組んで各セル内の下枠だけを
指定すれば、こんな罫線になります♪
*この枠のソース 5行分*
<TABLE style="border:#ffccff double 5px">
<TBODY>
<TR>
<TD valign="middle" align="center" width="300" height="20" style="border-bottom:#cc9900 dashed 1px"><FONT size="2">テキスト</FONT></TD>
</TR>
<TR>
<TD valign="middle" align="center" width="300" height="20" style="border-bottom:#cc9900 dashed 1px"><FONT size="2">テキスト
</FONT></TD>
</TR>
<TR>
<TD valign="middle" align="center" width="300" height="20" style="border-bottom:#cc9900 dashed 1px"><FONT size="2">テキスト</FONT></TD>
</TR>
<TR>
<TD valign="middle" align="center" width="300" height="20" style="border-bottom:#cc9900 dashed 1px"><FONT size="2">テキスト</FONT></TD>
</TR>
<TR>
<TD valign="middle" align="center" width="300" height="20" style="border-bottom:#cc9900 dashed 1px"><FONT size="2">テキスト</FONT></TD>
</TR>
</TBODY>
</TABLE>


© Rakuten Group, Inc.